<template>
  <div class="tags">
    <el-scrollbar ref="scrollMenu" style="height: 100%;">
      <div class="scrollbar-flex-content">
        <el-tag
          v-for="(item, index) in this.$store.state.tagRoute.tagsList"
          :key="item.title"
          :class="{active: $store.state.tagRoute.tagIndex == index}"
          type="info"
          closable
          size="small"
          @click="tagClick(item, index)"
          @close="handleClose(item, index)"
        >{{ item.title }}</el-tag>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // items: [
      //   { type: '', label: '标签一' },
      //   { type: 'success', label: '标签二' },
      //   { type: 'info', label: '标签三' },
      //   { type: 'danger', label: '标签四' },
      //   { type: 'warning', label: '标签五' }
      // ]
    };
  },
  methods: {
    // 删除标签页
    handleClose(item, index) {
      if (index <= 0) return false;
      this.$store.dispatch("getRemoveTagRoute", item); //移除当前标签
      if (index == this.$store.state.tagRoute.tagIndex) {
        //删除高亮标签页
        this.$store.dispatch("getSetTagIndex", index - 1); // 点亮上一个标签页
        this.$router.replace({
          //跳转高亮标签页上一个标签页
          path: this.$store.state.tagRoute.tagsList[index - 1].path,
        });
      } else if (index < this.$store.state.tagRoute.tagIndex) {
        //删除高亮标签页前面任意一个标签页
        this.$store.dispatch(
          "getSetTagIndex",
          this.$store.state.tagRoute.tagIndex - 1
        );
      }
    },
    // 点击标签页 实现路由切换 点亮标签页
    tagClick(tag, index) {
      // console.log(tag, index)
      if (this.$route.path != tag.path) {
        this.$router.replace({ path: tag.path });
        this.$store.dispatch("getSetTagIndex", index);
      }
    },
    // 滑轮事件回调函数
    handelr(event) {
      // console.log(event)
      // 获取滚动方向
      const detail = event.wheelDelta || event.detail
      // 定义滚动方向
      const moveForwardStep = 1;
      const moveBackStep = -1;
      // 定义滚动的距离
      let step = 0;
      // 判断滚动方向 100可以修改 代表滚动幅度
      if (detail < 0) {
        step = moveForwardStep * 100
      } else {
        step = moveBackStep * 100
      }
      this.$refs.scrollMenu.wrap.scrollLeft += step
    }
  },
  mounted() {
    console.log(this.$refs.scrollMenu)
    this.$refs.scrollMenu.wrap.addEventListener('mousewheel', this.handelr)
  }
};
</script>

<style lang="scss" scoped>

.tags {
  height: 100%;
  .el-tag {
    margin-right: 3px;
  }
  .el-tag:last-child {
    margin-right: 0;
  }
  .el-tag.active {
   background-color: 	#00F5FF;
    color: #17b3a3;
  }
}
.scrollbar-flex-content{
  height: 33px;
    display: flex;
    align-items: flex-end;
}
::v-deep .el-tag i{
  color: #9999 !important;
}
::v-deep .el-tag.active i{
  color: #17b3a3 !important;
}
::v-deep .el-tag:first-child i{
  display: none;
}
.el-scrollbar{
  height: 34px;
  .el-scrollbar__bar{
    bottom: 0;
  }
}
::v-deep .el-scrollbar__wrap{
  overflow: hidden;
}
</style>